<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>年会报名</title>
		<%@include file="../common/tagDeclare.jsp" %>
		<%@include file="../common/headBase.jsp" %>
		<c:set var="ctx" value="${pageContext.request.contextPath}"></c:set>

		<script src="${ctx}/lib/plupload-2.1.9/js/plupload.full.min.js"></script>

		<!-- 引入 echarts.js -->
		<script src="${ctx}/js/echarts.common.min.js"></script>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="${ctx}/css/mui.min.css">
		<style type="text/css">
			.mui-row {
				width: 100%
			}
			
			.mui-row label {
				width: 30%;
				display: inline-block;
				text-align: right;
				color: #9c090a;
				font-size: 12px;
			}
			
			.mui-row input {
				width: 60%;
				display: inline-block;
				height: 32px;
				margin-left: 2%;
				margin-bottom: 10px;
			}
			
			.mui-row input[type=radio] {
				display: inline-block;
				width: 20px;
				height: 20px;
				line-height: 20px;
			}
			
			.mui-row span {
				color: #9c090a;
				font-size: 12px;
			}
			
			.submit {
				background-color: #9c090a;
				border: transparent;
				margin-left: 2%;
			}
			
			.reset {
				background-color: #999;
				border: transparent;
				margin-left: 2%;
			}
		</style>
	</head>

	<body>
		<div class="mui-content">
			<div id="" class="head">
				<img src="${ctx}/images/sccccc.jpg" style="width: 100%;" />
			</div>
			<div class="bottom" style="position: relative;">
				<div class="">
					<img src="${ctx}/images/ccccccc.jpg" style="width: 100%;"/>
				</div>
				<form id="registerInfo">
					<div class="contact" style="position: absolute; bottom: 9%; width: 100%;">
						<div class="mui-row">
							<label for="">姓名:</label><input type="text" name="name" id="userName"/>
						</div>
						<div class="mui-row">
							<label for="">性别:</label><input type="radio" name="sex" value="0" checked id="sex0"/> 男
							<input type="radio" name="sex" value="1" id="sex1"/> 女
						</div>
						<div class="mui-row hide222" style="margin-top: 10px;">
							<label for="">手机:</label><input type="text" name="cellphone" />
						</div>
						<div class="mui-row hide222">
							<label for="">邮箱:</label><input type="text"  name="email"/>
						</div>
						<div class="mui-row hide222">
							<label for="">科大入学年份:</label><input type="text" name="enrollmentYear"/>
						</div>
						<div class="mui-row hide222">
							<label for="">专业:</label><input type="text"  name="major"/>
						</div>
						<div class="mui-row hide222">
							<label for="">现工作单位:</label><input type="text"  name="workUnit"/>
						</div>
						<div class="mui-row hide222">
							<label for="">工作行业:</label><input type="text" name="workIndustry"/>
						</div>
						<div class="mui-row hide222">
							<label for="">所在城市:</label><input type="text" name="city"/>
						</div>
						<div class="mui-row show" style="text-align: center; display: none;">
							<img src="${ctx}/images/3111.png" width="50%" />
						</div>
						<div class="mui-row" style="text-align: center; display: none;" id="checkCodeDiv">
							<img style="width: 180px;height:60px" src="${ctx}/imageCode?openid=${userInfo.openid}" id="checkCode"/><br/>
							支付金额时请将上面四位数验证码填入备注中
						</div>
						<div class="mui-row hide222">
							<label for=""></label> <a href="javascript:;" type="button" class="btn btn-primary js-form-btn js-block">提交</a><button type="button" class="mui-btn mui-btn-blue reset">重置</button>
						</div>
					</div>
				</form>
			</div>

		</div>
		<script src="${ctx}/js/mui.min.js"></script>
		<script src="${ctx}/js/jquery-1.8.3.min.js"></script>
		<script type="text/javascript">
			var ctx = '${ctx}';
			//登陆用户id
			var openid = '${userInfo.openid}';
			var flag = '${flag}';
			var flag2 = '${flag2}';
			if(flag=="alreadyRegistered"){
                $("input[name='sex']:radio").attr("disabled","disabled");
                $("#userName").attr("disabled","disabled");
				var userName = '${registerVo.name}';
				var sex = '${registerVo.sex}';
				$("#userName").val(userName);
				if(sex==0){
					$("#sex0").attr("checked","checked");
					$("#sex1").removeAttr("checked");
				}else if(sex==1){
					$("#sex0").removeAttr("checked");
					$("#sex1").attr("checked","checked");
				}
				$(".hide222").hide();
				$(".show").show();
				if(flag2 != null && flag2 == 'exist'){
					$("#checkCodeDiv").css("display","block");
				}else{
					$("#checkCodeDiv").css("display","none");
				}
			}else{
				$("#checkCodeDiv").css("display","block");
				$(".hide222").show();
				$(".show").hide()
			}

			$('#registerInfo').on('click','.js-form-btn',function(){
				var map = registerInfoChecked();
				if(map.flag){
					var code = getURLParameter("code");
					var url = ctx+"/test/saveRegisterInfo";
					if(code != null && code != undefined && $.trim(code).length>0){
						url = ctx+"/test/saveRegisterInfo?code="+code;
					}
					var po = new Object();
					po.openid=openid;
					RFQ.form('#registerInfo').ajaxSubmit(url,po,function (data) {
						var messageList1 = data.rspcod;
						if(messageList1 == '200'){
							$(".hide222").hide();
							$(".show").show();
							$.post(ctx+"/imageCode",{"openid":openid},function(data){
								if(!data){
									$("#checkCodeDiv").css("display","none");
								}else{
									$("#checkCodeDiv").css("display","block");
								}
							},false);
						}else{
							RFQ.error("保存失败！");
						}
					});
				}else{
					RFQ.error(map.message);
				}
			})

			//报名信息校验
			function registerInfoChecked(){
				var map = {};
				map["flag"]=true;
				map["message"]="校验成功！";
				var $name = $('input[name="name"]').val();
				var $cellphone = $('input[name="cellphone"]').val();
				//非空校验
				if($name == null || $name == ''){
					map["flag"]=false;
					map["message"]="姓名不能为空！";
					return map;
				}
				if($cellphone == null || $cellphone == ''){
					map["flag"]=false;
					map["message"]="手机号不能为空！";
					return map;
				}
				//格式校验
				var search_str = /^1[3|4|5|7|8][\d]{9}$/;
				if(!search_str.test($cellphone)){
					map["flag"]=false;
					map["message"]="手机号格式错误！";
					return map;
				}
				return map;
			}
			//调用方法，参数为url中的参数名称
			function getURLParameter(name) {
				var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
				var res = window.location.search.substr(1).match(reg);
				return res ? decodeURIComponent(res[2]) : null;
			}
		</script>
	</body>

</html>